<!DOCTYPE html>
<html lang="zh" xml:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录日志 - 物联网调试管理系统</title>
    <script th:src="@{/statics/jquery-1.12.4.min.js}"></script>
    <script th:src="@{/statics/tabler/tabler.min.js}"></script>
    <link rel="stylesheet" th:href="@{/statics/tabler/tabler.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/statics/bootstrap/table/bootstrap-table.min.css}">
    <script th:src="@{/statics/bootstrap/table/bootstrap-table.min.js}"></script>
    <script th:src="@{/statics/bootstrap/table/bootstrap-table-zh-CN.min.js}"></script>
    <link rel="stylesheet" th:href="@{/statics/system/common.css}">
    <script th:src="@{/statics/layer/layer.js}"></script>
    <script th:src="@{/statics/system/common.js}"></script>
</head>
<body>
<div class="page">
    <div th:replace="common/header :: header"></div>

    <div class="page-wrapper">
        <div class="page-header d-print-none">
            <div class="container-xl">
                <div class="row g-2 align-items-center">
                    <div class="col">
                        <!-- Page pre-title -->
                        <div class="page-pretitle">
                            物联网调试管理后台
                        </div>
                        <h2 class="page-title">
                            登录日志
                        </h2>
                    </div>
                    <div class="col-auto ms-auto d-print-none">
                        <div class="btn-list">
                            <select class="form-select" id="select" onchange="changeTime()">
                                <option value="0">全部</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="page-body">
            <div class="container-xl">
                <div class="row row-deck row-cards">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-vcenter" id="loginlog_table"></table>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    //菜单class追加属性
    //菜单class追加属性
    $(function () {
        $("#menu_system").addClass("active");
    });

    //初始化表格
    $('#loginlog_table').bootstrapTable({
        url: '/loginLog/list',
        method: 'get',
        dataType: 'json',
        pagination: true,
        pageSize: 10,
        pageList: [10, 20],
        responseHandler: function (res) {
            return {
                "rows": res.data.rows,
                "total": res.data.total
            }
        },
        columns: [{
            field: 'loginTime',
            title: '登录时间'
        }, {
            field: 'username',
            title: '用户名'
        }, {
            field: 'adminIP',
            title: 'IP'
        }, {
            field: 'adminOS',
            title: '操作系统'
        }, {
            field: 'loginStatus',
            title: '状态',
            formatter: function (value, row, index) {
                if (value === 0) {
                    return '<span class="status status-green">成功</span>'
                } else {
                    return '<span class="status status-red">失败</span>'
                }
            }
        }]
    });

    $.ajax({
        url: '/loginLog/list',
        type: 'get',
        dataType: 'json',
        success: function (res) {
            //取出所有时间，去重，放入select，格式yyyy-MM-dd
            var timeArr = [];
            for (var i = 0; i < res.data.rows.length; i++) {
                timeArr.push(res.data.rows[i].loginTime.substring(0, 10));
            }
            var timeArr2 = [];
            for (var i = 0; i < timeArr.length; i++) {
                if (timeArr2.indexOf(timeArr[i]) === -1) {
                    timeArr2.push(timeArr[i]);
                }
            }
            for (var i = 0; i < timeArr2.length; i++) {
                $("#select").append("<option value='" + timeArr2[i] + "'>" + timeArr2[i] + "</option>");
            }
        }
    });

    function changeTime() {
        var time = $("#select").val();
        if (time === "0") {
            $('#loginlog_table').bootstrapTable('refresh', {url: '/loginLog/list'});
        } else {
            $('#loginlog_table').bootstrapTable('refresh', {url: '/loginLog/list?time=' + time});
        }
    }
</script>
<style>
    .fixed-table-container {
        height: 400px;
    }
</style>
</html>
